<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>查询书目</title>
    <style>
        * {
            padding: 0;
            margin: 0
        }
        
        ul,
        li {
            list-style: none;
        }
        
        li {
            padding: 1rem;
            border: 1px solid #abcdef;
            border-radius: 2rem;
        }
        
        .cover {
            width: 100%;
            background: #eaeaea;
            height: 4rem;
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translate(-50%, 0);
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .container {
            padding-bottom: 4rem;
        }
        
        #search {
            width: 4rem;
            height: 2rem;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="cover">
            <button id="search">语音识别</button>
        </div>
        <h2 style="text-align: center;">欢迎使用搜索页</h2>
        <ul class="list">
        </ul>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script type="text/javascript">
        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: "<%= appID %>", // 必填，公众号的唯一标识
            timestamp: "<%= timestamp %>", // 必填，生成签名的时间戳
            nonceStr: "<%= noncestr %>", // 必填，生成签名的随机串
            signature: "<%= signature %>", // 必填，签名
            jsApiList: ["openLocation", "getLocation"] // 必填，需要使用的JS接口列表
        });
        wx.ready(function() {
            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
            wx.getLocation({
                type: "wgs84", // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
                success: function(res) {
                    let result = JSON.stringify(res);
                    var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                    var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                    var speed = res.speed; // 速度，以米/每秒计
                    var accuracy = res.accuracy; // 位置精度
                    wx.openLocation({
                        latitude, // 纬度，浮点数，范围为90 ~ -90
                        longitude, // 经度，浮点数，范围为180 ~ -180。
                        name: '安师师范大学核酸检测点', // 位置名
                        address: '安徽师范大学南测体育场出口', // 地址详情说明
                        scale: 12, // 地图缩放级别,整型值,范围从1~28。默认为最大
                        infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
                    });
                },
            });
        })
    </script>
</body>

</html>